<template>
<div>

<el-card class="box-card">
    
    <!-- 功能框 -->
    <el-row>
        <el-input style="width:400px" placeholder="请输入内容" size="medium" class="input-with-select">
            <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
         <el-button style="margin-left:10px" type="primary" @click="showAdd = true">添加用户</el-button>
    </el-row>

    <!-- 数据表格 -->
    <el-table :data="users" border style="width: 100%">
        <el-table-column prop="date" label="日期" width="180"></el-table-column>
        <el-table-column prop="name" label="姓名"  width="180"> </el-table-column>
        <el-table-column  prop="address" label="地址"></el-table-column>
        <el-table-column width="240px" label="操作">
        <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="showEditFunction(scope.row)">编辑</el-button>
            <el-button type="warning" size="mini" @click="delUser(scope.row.id)">删除</el-button>
            <el-button type="danger" size="mini" @click="showRoleFunction(scope.row)">分配角色</el-button>
        </template>
        </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="pageInfo.pagenow"
      :page-size="pageInfo.pagesize"
      layout="prev, pager, next, jumper"
      :total="pageInfo.total">
    </el-pagination>

    <!-- dailog控制 -->
    <el-dialog title="添加用户" @close="addFormClear" :visible.sync="showAdd" width="50%">
        <el-form :model="userAddForm" :rules="userAddFormRules" ref="userAddForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="name">
                <el-input v-model="userAddForm.name"></el-input>
            </el-form-item>
            <el-form-item label="时间" prop="date">
                   <el-date-picker
                    v-model="userAddForm.date"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期">
                    </el-date-picker>
            </el-form-item>
            <el-form-item label="地址" prop="address">
                <el-input v-model="userAddForm.address"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="showAdd = false">取 消</el-button>
            <el-button type="primary" @click="addUser">确 定</el-button>
        </span>
    </el-dialog>

    <el-dialog title="修改用户" @close="editFormClear" :visible.sync="showEdit" width="50%">
        <el-form :model="userEditForm" :rules="userEditFormRules" ref="userEditForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="name">
                <el-input v-model="userEditForm.name"></el-input>
            </el-form-item>
            <el-form-item label="时间" prop="date">
                   <el-date-picker
                    v-model="userEditForm.date"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期">
                    </el-date-picker>
            </el-form-item>
            <el-form-item label="地址" prop="address">
                <el-input v-model="userEditForm.address"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="showEdit = false">取 消</el-button>
            <el-button type="primary" @click="editUser">确 定</el-button>
        </span>
    </el-dialog>

    <el-dialog title="角色分配" @close="roleFormClear" :visible.sync="showRole" width="50%">
        <p><span>用户名:</span><el-tag>{{this.userRoleForm.name}}</el-tag></p>
        <br>
        <p v-if="showRole"><span>当前角色:</span><el-tag type="danger">{{getRoleName}}</el-tag></p>
        <br>
        <p>
            <el-select v-model="selectRole" placeholder="请选择角色">
                <el-option
                v-for="item in roles"
                :key="item.id"
                :label="item.roleName"
                :value="item.id">
                </el-option>
            </el-select>
        </p>
        <span slot="footer" class="dialog-footer">
            <el-button @click="showRole = false">取 消</el-button>
            <el-button type="primary" @click="editRole">确 定</el-button>
        </span>
    </el-dialog>

    

</el-card>
</div>




  
</template>


<script>
export default {
    data(){
        return {
            users:[
            {
                id:1,
                date: '2016-05-02',
                name: '王小虎1',
                address: '上海市普陀区金沙江路 1518 弄',
                role:1,
            },
            {
                id:2,
                date: '2016-05-02',
                name: '王小虎2',
                address: '上海市普陀区金沙江路 1518 弄',
                role:2,
            },
            {
                id:3,
                date: '2016-05-02',
                name: '王小虎3',
                address: '上海市普陀区金沙江路 1518 弄',
                role:3,
            },
            {
                id:4,
                date: '2016-05-02',
                name: '王小虎4',
                address: '上海市普陀区金沙江路 1518 弄',
                role:4,
            },
            ],
            pageInfo:{
                //分页数据
                pagenow:1,
                pagesize:4,
                total:50
            },
            //dailog控制
            showAdd:false,
            showEdit:false,
            showRole:false,
            // user add
            userAddForm:{
                id:'',
                date:'',
                name:'',
                address:'',
            },
            userAddFormRules:{
                name: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                ],
                date:[
                    { required: true, message: '请选择时间', trigger: 'blur' },
                ],
                address:[
                    { required: true, message: '请输入地址', trigger: 'blur' },
                ],
            },
            // edit
            userEditForm:{
                id:'',
                date:'',
                name:'',
                address:'',
            },
            userEditFormRules:{
                name: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                ],
                date:[
                    { required: true, message: '请选择时间', trigger: 'blur' },
                ],
                address:[
                    { required: true, message: '请输入地址', trigger: 'blur' },
                ],
            },
            //user role 
            userRoleForm:{
                id:'',
                name:'',
                address:'',
                date:'',
                role:'',
            },
            selectRole:'',
            roles:[
                {id:1,roleName:"管理员"},
                {id:2,roleName:"会员"},
                {id:3,roleName:"普通用户"},
                {id:4,roleName:"游客"},
            ],
        }
    },
    methods:{
        delUser(id){
            var confirm = this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            });
            confirm.then(()=>{
                var index = this.users.findIndex((user)=>{
                    return id===user.id;
                });
                this.users.splice(index,1);
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });  
            });
        },
        showEditFunction(user){
            this.userEditForm = user;
            this.showEdit = true;
        },
        showRoleFunction(user){
            this.showRole = true;
        },
        showRoleFunction(user){
            this.userRoleForm = user;
            this.showRole = true;
        },
        addUser(){
            this.$refs.userAddForm.validate((val)=>{
                if(val){
                    //验证通过
                    this.userAddForm.id = this.users.length+1;
                    this.users.push({
                        id:this.userAddForm.id,
                        name:this.userAddForm.name,
                        date:this.userAddForm.date,
                        address:this.userAddForm.address,
                    });
                    this.showAdd = false;
                }
            });
        },
        editUser(){
            this.$refs.userEditForm.validate((val)=>{
                if(val){
                    var index = this.users.findIndex((user)=>{
                        return user.id === this.userEditForm.id;
                    });
                    this.users.splice(index,1,{
                        id:this.userEditForm.id,
                        name:this.userEditForm.name,
                        date:this.userEditForm.date,
                        address:this.userEditForm.address,
                    });
                    this.showEdit = false;
                }
            });
        },
        editRole(){
            if(this.selectRole!==''){
                var index = this.users.findIndex((u)=>{
                    return u.id === this.userRoleForm.id;
                });
                this.users.splice(index,1,{
                    name:this.userRoleForm.name,
                    id:this.userRoleForm.id,
                    address:this.userRoleForm.address,
                    date:this.userRoleForm.date,
                    role:this.selectRole
                })
            }
            this.showRole = false;
        },
        addFormClear(){
            this.userAddForm.id = '';
            this.$refs.userAddForm.resetFields();
        },
        editFormClear(){
            this.$refs.userEditForm.resetFields();
        },
        roleFormClear(){
           this.userRoleForm = {};
           this.selectRole = '';
        },

        //分页
        handleCurrentChange(pagenum){
            console.log(pagenum);
        },
    },
    computed:{
        getRoleName(){
            var index = this.roles.findIndex((r)=>{
                return r.id === this.userRoleForm.role;
            });
            return this.roles[index].roleName;
        }
    },
}
</script>


<style scoped>

</style>